<template>
    <div class="source">
        <!-- 系列条款弹窗 -->
        <el-dialog title="产品条款复制" :visible.sync="dialogVisible" width="870px" :close-on-click-modal="false">
            <div>
                <el-form>
                    <el-row>
                        <el-col :span="12" style="padding-left: 32px; margin-bottom: 10px">
                            <el-form-item label="迁移产品:" style="margin-bottom: 0">
                                <el-select v-model="clauseForFund.belongFund" placeholder="请选择" size="mini" filterable @change="changeBelongFund">
                                    <el-option
                                        :label="item.indexName"
                                        :value="item.indexDirectoryCode"
                                        v-for="item in fundByFundTypeList"
                                        :key="item.indexDirectoryCode"
                                    >
                                        {{ item.productCode }} {{ item.indexName }}</el-option
                                    >
                                </el-select>
                            </el-form-item>
                            <el-form-item label="迁移合同:" style="margin-bottom: 0">
                                <el-select
                                    v-model="clauseForFund.versionNumberMigration"
                                    multiple
                                    collapse-tags
                                    placeholder="请选择"
                                    size="mini"
                                    @change="handleVersionMigration"
                                >
                                    <el-option
                                        v-for="item in MigrationVersions"
                                        :key="item.articleDeatilsCode"
                                        :label="item.versionNumber"
                                        :value="item.articleDeatilsCode"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" style="padding-left: 96px; margin-bottom: 10px">
                            <el-form-item label="目标产品:" style="margin-bottom: 0">
                                <el-select v-model="treeNodeData.id" size="mini" disabled>
                                    <el-option
                                        :label="item.indexName"
                                        :value="item.indexDirectoryCode"
                                        v-for="item in fundByFundTypeList"
                                        :key="item.indexDirectoryCode"
                                    >
                                        {{ item.productCode }} {{ item.indexName }}</el-option
                                    >
                                </el-select>
                            </el-form-item>
                            <el-form-item label="目标合同:" style="margin-bottom: 0">
                                <el-select v-model="clauseForFund.versionNumber" multiple collapse-tags placeholder="请选择" size="mini">
                                    <el-option
                                        :label="item.versionNumber"
                                        :value="item.articleDeatilsCode"
                                        v-for="item in VersionNums"
                                        :key="item.articleDeatilsCode"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

                <div class="transferFat">
                    <el-transfer
                        filterable
                        :filter-method="filterMethod"
                        filter-placeholder=""
                        v-model="transferValue"
                        :data="transferData"
                        @change="handleChange"
                        ref="myTransfer"
                    >
                    </el-transfer>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmQuery">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import RiskTrantable from '@/common/components/risk-trantable.vue';
import { SGU_CACHE } from '@/utils/diction-const-util';
@Component({
    name: 'SerialClauseDialog',
    components: {
        RiskIconButton,
        RiskTrantable,
    },
})
export default class SerialClauseDialog extends Vue {
    @Prop() serialClauseDialog;
    @Prop() treeNodeData;
    private dialogVisible: boolean = false;
    private FundTypes: any = []; // 产品类型下拉框
    fundByFundTypeList = []; // 所属产品下拉框
    transferValue = []; // 右侧key
    transferValueList = [];
    transferData = []; // 左侧+右侧，
    initData = [];

    fundSourceCategoryData = [];
    clauseForFund = {
        // 查询条件
        fundType: '',
        belongFund: '',
        versionNumber: [],
        versionNumberMigration: [],
    };
    clauseQueryParam = {
        // 列表查询条件
        articleCode: '',
        belongFund: '',
        clauseCode: '',
        clauseNo: '',
        clauseSourceCode: '',
        clauseStatus: '',
        clauseText: '',
        clauseTextLike: '',
        clauseType: '',
        hdSupport: '',
        paging: {
            currentPage: 1,
            pageSize: 50,
        },
        passiveTransfinite: null,
        realTimeSupport: '',
        status: '',
        suitableFund: '',
        versionNumber: '',
        versionValid: '',
    };
    private VersionNums = [];
    MigrationVersions: any[] = []; // 迁移合同下拉仓库

    @Watch('serialClauseDialog')
    async watchSerialClauseDialog(val) {
        this.dialogVisible = val;
        if (val == true) {
            this.$nextTick(() => {
                const $myTrans = this.$refs.myTransfer as any;
                if ($myTrans) {
                    $myTrans.$children[0].query = '';
                    $myTrans.$children[3].query = '';
                }
            });
            this.clauseQueryParam.articleCode = this.treeNodeData.id;
            this.getSelectClauseForFund();
            this.getFundByFundType();
            this.getVersionNums(this.treeNodeData.id);
        } else {
            this.clauseForFund = {
                // 查询条件
                fundType: '',
                belongFund: '',
                versionNumber: [],
                versionNumberMigration: [],
            };
            this.transferValue = []; // 右侧key
            this.transferValueList = [];
            this.transferData = []; // 左侧+右侧，
            this.fundByFundTypeList = [];
            this.FundTypes = [];
            this.clauseQueryParam = {
                // 列表查询条件
                articleCode: '',
                belongFund: '',
                clauseCode: '',
                clauseNo: '',
                clauseSourceCode: '',
                clauseStatus: '',
                clauseText: '',
                clauseTextLike: '',
                clauseType: '',
                hdSupport: '',
                paging: {
                    currentPage: 1,
                    pageSize: 50,
                },
                passiveTransfinite: null,
                realTimeSupport: '',
                status: '',
                suitableFund: '',
                versionNumber: '',
                versionValid: '',
            };
        }
    }
    @Watch('dialogVisible')
    watchDialogVisible(val) {
        if (val == false) {
            this.$emit('emitSerialClauseDialog', false);
        }
    }
    changeClauseType(param) {
        this.clauseForFund.belongFund = '';
    }
    // 根据产品类型获取产品select
    getFundByFundType() {
        this.$axios.post('/zhiguan/indexArticle/directory/product/query', { parentCode: '', indexType: '2' }).then((res: any) => {
            if (res) {
                this.fundByFundTypeList = [];
                res.forEach(item => this.fundByFundTypeList.push(item));
            }
        });
    }
    // 未选择
    changeBelongFund(param) {
        this.clauseForFund.versionNumberMigration = [];

        this.transferData = this.transferValueList;
        this.transferValue = this.transferValueList.map(i => i.key);

        this.getMigrationVersion(param);
    }

    /**
     * 目标合同变动事件
     */
    handleVersionMigration(val): void {
        // this.transferValue = [];
        this.getIndexClauseList(val);
    }

    /**
     * 获取迁移产品下的所有合同
     */
    getMigrationVersion(articleCode): void {
        if (!articleCode) {
            this.MigrationVersions = [];
            return;
        }
        this.$axios({ method: 'post', url: '/zhiguan/indexArticle/articleDetails/query', data: { articleCode } }).then((res: any) => {
            this.MigrationVersions = res || [];
        });
    }

    /**
     * 获取迁移合同下的所有条款
     */
    getIndexClauseList(articleDeatilsCode): void {
        // if (!articleDeatilsCode.length) {
        //     this.transferData = [];
        //     return;
        // }
        this.$axios({ method: 'post', url: '/zhiguan/indexClause/list', data: { versionNumbers: articleDeatilsCode } }).then((res: any) => {
            this.transferData = [];
            if (this.clauseForFund.belongFund == this.treeNodeData.id) {
                res.list.forEach(item => {
                    this.transferData.push({
                        label: item.clauseText,
                        key: item.clauseCode + 'copy',
                    });
                });
            } else {
                res.list.forEach(item => {
                    this.transferData.push({
                        label: item.clauseText,
                        key: item.clauseCode,
                    });
                });
            }

            if (this.transferValueList) {
                this.transferValueList.forEach(item => {
                    this.transferData.push({
                        label: item.label,
                        key: item.key,
                        disabled: true,
                    });
                });
            }
        });
    }

    // 获取产品选择的条款
    getSelectClauseForFund() {
        this.$axios.post('/zhiguan/indexClause/list', this.clauseQueryParam).then((res: any) => {
            this.transferValueList = [];
            this.transferValue = [];
            this.transferData = [];
            this.initData = [];
            res.list.forEach(item => {
                this.transferValueList.push({
                    label: item.clauseText,
                    key: item.clauseCode,
                    disabled: true,
                });
                this.transferValue.push(item.clauseCode);
                this.initData.push(item.clauseCode);
            });
            res.list.forEach(item => {
                this.transferData.push({
                    label: item.clauseText,
                    key: item.clauseCode,
                    disabled: true,
                });
            });
        });
    }

    // 获取当前来源的所有版本号
    getVersionNums(indexCode) {
        this.$axios
            .post('/zhiguan/indexArticle/articleDetails/query', {
                articleCode: indexCode,
            })
            .then((res: any) => {
                this.VersionNums = [];
                res.forEach(item => this.VersionNums.push(item));
            });
    }

    queryBelongFund() {}
    // 获取产品未选择的条款
    getUnSelectClauseForFund(param) {
        if (param == 'comfirm') {
            this.$axios
                .post('/indexClause/getUnSelectClauseForFund', {
                    belongFund: this.clauseForFund.belongFund,
                })
                .then((res: any) => {
                    this.transferData = [];
                    if (res) {
                        if (this.clauseForFund.belongFund == this.treeNodeData.id) {
                            res.forEach(item => {
                                this.transferData.push({
                                    label: item.indexName,
                                    key: item.indexDirectoryCode + 'copy',
                                });
                            });
                        } else {
                            res.forEach(item => {
                                this.transferData.push({
                                    label: item.indexName,
                                    key: item.indexDirectoryCode,
                                });
                            });
                        }

                        if (this.transferValueList) {
                            this.transferValueList.forEach(item => {
                                this.transferData.push({
                                    label: item.label,
                                    key: item.key,
                                    disabled: true,
                                });
                            });
                        }
                    }
                });
        } else if (param == 'reset') {
            this.clauseForFund = {
                // 查询条件
                fundType: '',
                belongFund: '',
                versionNumber: [],
                versionNumberMigration: [],
            };
        }
    }
    filterHasSameArr(arr1, arr2) {
        return arr1.filter(item => {
            if (arr2.indexOf(item) < 0) {
                return item;
            }
        });
    }
    // 产品条款复制
    confirmQuery() {
        let value = this.filterHasSameArr(this.transferValue, this.initData);
        let value2 = [];
        value.forEach(item => {
            if (item.indexOf('copy') != -1) {
                value2.push(item.slice(0, -4));
            } else {
                value2.push(item);
            }
        });

        if (value2.length === 0) {
            this.yh_message_warn('条款未变更, 请重新选择条款!');
            return;
        }
        if (this.clauseForFund.versionNumber.length === 0) {
            this.yh_message_warn('请选择合同文件!');
            return;
        }
        this.$axios
            .post('/zhiguan/indexClause/product/multipleCopy', {
                articleCode: this.treeNodeData.id,
                directoryCode: this.treeNodeData.productTypes,
                // versionNumber: this.clauseForFund.belongFund,
                articleDeatilsCodeList: this.clauseForFund.versionNumber,
                clauseList: value2,
            })
            .then((res: any) => {
                this.yh_message_success('复制成功！');
                this.dialogVisible = false;
                this.$emit('emitCopyProduct');
            })
            .catch(() => {
                this.yh_message_error('复制失败！');
                this.dialogVisible = false;
            });
    }
    filterMethod(query, item) {
        return item.label.indexOf(query) > -1;
    }
    handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys);
    }
}
</script>
<style lang="scss" scoped>
.source {
    height: calc(98vh - 7px);
    background: #ffffff;
}
table {
    width: 50%;
}
.transferFat {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
}
/deep/ .el-transfer-panel .el-transfer-panel__header {
    display: none !important;
}
/deep/ .el-transfer-panel {
    width: 300px;
}
/deep/ .el-transfer__button {
    width: 55px !important;
    span {
        padding-right: 25px !important;
    }
}
/deep/ .el-transfer-panel__filter .el-input__inner {
    width: 270px !important;
    border-radius: 0px !important;
}

/***  collapse-tags样式 ***/
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: fit-content;
    padding: 0px 5px 0 0;
    margin: 4px 0px 2px 2px;
    .el-select__tags-text {
        display: inline-block;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:first-of-type {
    width: 63%;
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:last-of-type {
    // width: calc(85% - 15px);
    width: 85%;
}
// /deep/ .el-select__tags .el-select__input {
//     margin-left: 0;
// }
/***  collapse-tags样式 ***/
</style>
